
import {defineComponent, ref, reactive, toRefs, watch, h, inject, onMounted} from 'vue'
import * as Types from "../../../../types";
import {  SearchOutlined } from '@vicons/antd'
import { useMessage } from 'naive-ui'
import { useStore } from "vuex"
import { IonButton } from '@ionic/vue';

export default defineComponent({
    components: {
       SearchOutlined, IonButton
    },
    setup() {
        const message = useMessage()
        const store = useStore()
        const state = reactive({
            showSearchContent: false,
            searchValue: '',
            showDropdown: false,
            searchOptionIndex: 0,
            searchOptionValue: '',
            searchOptions: [
                {
                    label: '百度一下',
                    key: "baidu",
                    url: 'https://www.baidu.com/s?wd=',
                    value: '百度一下',
                }, {
                    label: '谷歌搜索',
                    key: "google",
                    url: 'https://www.google-fix.com/search?q=',
                    value: '谷歌搜索'
                }, {
                    label: '必应搜索',
                    key: "bing",
                    url: 'https://cn.bing.com/search?q=',
                    value: '必应搜索',
                }, {
                    label: '搜狗搜索',
                    key: "sogou",
                    url: 'https://www.sogou.com/web?query=',
                    value: '搜狗搜索',
                }, {
                    label: '360搜索',
                    key: "360so",
                    url: 'https://www.so.com/s?q=',
                    value: 'aa',
                }, {
                    label: '知乎',
                    key: "zhihu",
                    url: 'https://www.zhihu.com/search?type=content&amp;q=',
                    value: 'aa',
                }, {
                    label: '微信',
                    key: "weixin",
                    url: 'https://weixin.sogou.com/weixin?type=2&query=',
                    value: 'aa',
                }, {
                    label: '微博',
                    key: "weibo",
                    url: 'https://s.weibo.com/weibo/',
                    value: 'aa',
                }, {
                    label: '哔哩哔哩',
                    key: "bilibili",
                    url: 'https://search.bilibili.com/all?keyword=0',
                    value: 'aa',
                }, {
                    label: '头条', 
                    key: "toutiao",
                    url: 'https://so.toutiao.com/search?dvpf=pc&source=input&keyword=',
                    value: 'aa',
                }, {
                    label: 'Magi',
                    key: "magi",
                    url: 'https://magi.com/search?q=',
                    value: 'aa',
                },  {
                    label: '雅虎',
                    key: "yahoo",
                    url: 'https://hk.search.yahoo.com/search?p=',
                    value: 'aa',
                }, {
                    label: 'F搜',
                    key: "fsofso",
                    url: 'https://fsofso.com/search?q=',
                    value: 'aa',
                }, {
                    label: '豆瓣',
                    key: "douban",
                    url: 'https://www.douban.com/search?q=',
                    value: 'aa',
                }, {
                    label: 'GitHub',
                    key: "github",
                    url: 'https://github.com/search?q=',
                    value: 'aa',
                }, {
                    label: 'NAVER',
                    key: "naver",
                    url: 'https://search.naver.com/search.naver?&query=',
                    value: 'aa',
                }, {
                    label: 'DuckDuckGo',
                    key: "duckduckgo",
                    url: 'https://duckduckgo.com/?q=',
                    value: 'aa',
                }, {
                    label: 'StackOverflow',
                    key: "stackoverflow",
                    url: 'https://stackoverflow.com/nocaptcha?s=',
                    value: 'aa',
                }, {
                    label: 'Google Scholar',
                    key: "scholar",
                    url: 'https://scholar.google.com/scholar?q=',
                    value: 'aa',
                }, {
                    label: 'MDN',
                    key: "mozilla",
                    url: 'https://developer.mozilla.org/zh-CN/search?q=',
                    value: 'aa',
                }, {
                    label: 'Can I use',
                    key: "caniuse",
                    url: 'https://caniuse.com/?search=',
                    value: 'aa',
                },
            ]
        })

        const methods = {
            search(){
                window.open(state.searchOptions[state.searchOptionIndex].url + state.searchValue);
                //window.location.href = state.searchOptions[state.searchOptionIndex].url + state.searchValue;
            },
            handleInput (v: string) {
                /*axios.get('http://sugs.m.sm.cn/web?t=w&uc_param_str=dnnwnt&scheme=http&fr=android&bid=1&q=' + encodeURIComponent(v) + '&_=' + new Date().getTime() + '&callback=jsonp3')
                    .then(res=>{
                        console.log(res)
                    }).catch(err=>{
                    message.error('服务器开小差了！')
                })*/
            },
            
            setSearchEngineByKey(value : string | number) {
                for (let i in state.searchOptions) {
                    if (state.searchOptions[i].value === value) {
                        state.searchOptionIndex = Number(i)
                    }
                }
            }
        }
        onMounted(()=>{
            setTimeout(()=>{
                methods.setSearchEngineByKey(store.state.searchEngineValue)
            }, 500)
        })
        watch(
            () => [state.searchOptionIndex, state.searchOptionValue],
            ([searchOptionIndex, searchOptionValue], [oldSearchOptionIndex, oldSearchOptionValue]) => {
                methods.setSearchEngineByKey(searchOptionValue)
                store.commit('changeSearchEngine', searchOptionValue)
            }
        )
        return {
            ...toRefs(state),
            SearchOutlined,
            ...methods,
            store
        }
    }
})
